<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    :before-close="handleCloseDialog"
  >
    <el-form label-width="80px" :model="dialogRelImageFormData" class="mt10">
      <el-form-item prop="image" label="遮罩图">
         <ul class="imglist">
          <li v-if="dialogRelImageFormData.viewurl" >
            <el-image fit="scale-down" :src="dialogRelImageFormData.viewurl + '&width=160'" style="width:160px;height:160px"/>
            <a class="delete-image" href="javascript:;" @click.stop="handleDeleteImg">
              <el-icon><circle-close/></el-icon>
            </a>
            <a class="edit-image" href="javascript:;" @click="handleAddImage">编辑</a>
          </li>
          <li class="imgplus" v-else @click="handleAddImage">
            <div>
              <el-icon>
                <plus />
              </el-icon>
            </div>
          </li>
          <!--<el-col :span="24">
            <el-empty :image-size="100"/>
          </el-col>-->
        </ul>
      </el-form-item>
      <el-form-item prop="sort" label="排序">
          <el-input placeholder="请输入序号" v-model="dialogRelImageFormData.sort" style="width:30%;"/>
      </el-form-item>

    </el-form>
    <template #footer>
        <div align="center">
          <el-button type="default" size="small" @click="handleCloseDialog">取消</el-button>
          <el-button  type="primary" size="small" @click="handleConfirmEditVideo">确定</el-button>
        </div>
      </template>
    <rel-image-medium
       ref="relImageMediumRef"
      :dialog-rel-image-visible="dialogRelImageVisible"
      dialog-rel-image-media-type="series"
      dialog-rel-action="createSeries"
      dialog-select-type="radio"
      :dialog-rel-image-form-data="dialogRelImageFormData"
      dialog-rel-image-title="选择视频遮罩图"
      @handleCancelRelImageDialog="handleCancelRelImageDialog"
      @handleVideoPlay="handleVideoPlay"
      @reloadMediaData="reloadMediaData"
    />
  </el-dialog>
</template>

<script>
  import { ref, toRef, nextTick } from 'vue'
  import RelImageMedium from "./RelImageMedium";
  import { editSeriesRefVideoSort } from "@/api/media/media";
  import { ElMessage } from 'element-plus'

  export default {
    name: "EditVideoMedium",
    components: { RelImageMedium },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      dialogTitle: {
        type: String,
        default: '视频添加遮罩图'
      },
      dialogFormData: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    emits: ['handleCloseDialog', 'handleVideoPlay', 'getVideoDataList'],
    setup(props, context) {
      const dialogRelImageFormData = toRef(props, 'dialogFormData')
      const handleCloseDialog = () => {
        context.emit('handleCloseDialog')
      }
      // 删除图片
      const handleDeleteImg = () => {
        dialogRelImageFormData.value.viewurl = undefined
        dialogRelImageFormData.value.video.maskimgid = 0
      }

      /** 关联图片弹框开始 **/
      const relImageMediumRef = ref(null)
      const dialogRelImageVisible = ref(false)
      // 开启弹框
      const handleAddImage = () => {
        dialogRelImageVisible.value = true
        nextTick(() => {
          relImageMediumRef.value.init()
        })
      }
      // 关闭弹框
      const handleCancelRelImageDialog = () => {
        dialogRelImageVisible.value = false
      }
      // 视频预览播放
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }
      // 选择图片后处理
      const reloadMediaData = (data) => {
        const response = (data && data[0]) ? data[0] : null
        if (response && response.errcode == 0) {
          dialogRelImageFormData.value.viewurl = response.data.viewurl
          dialogRelImageFormData.value.video.maskimgid = response.data.imgid
        }
      }
      /** 关联图片弹框结束 **/

      const handleConfirmEditVideo = () => {
        editSeriesRefVideoSort(dialogRelImageFormData.value).then(response => {
          if (response.errcode == 0) {
            ElMessage({
              type: 'success',
              message: '编辑成功',
              duration: 2000,
              onClose: () => {
                handleCloseDialog()
                context.emit('getVideoDataList')
              }
            })
          }
        })
      }

      return {
        handleCloseDialog,
        handleDeleteImg,
        handleAddImage,
        dialogRelImageVisible,
        dialogRelImageFormData,
        handleCancelRelImageDialog,
        handleVideoPlay,
        reloadMediaData,
        relImageMediumRef,
        handleConfirmEditVideo
      }
    }
  }
</script>

<style scoped lang="scss">
  .imglist{
    display: flex;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 160px;
      margin-right: 15px;
      margin-bottom:10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border:1px solid rgba(153,153,153,0.4);
      .edit-image{
        display: flex;
        position: absolute;
        bottom:0;
        right:0;
        padding: 4px 9px;
        color:#fff;
        font-size: 12px;
        background-color: rgba(0,0,0,0.6);
        line-height: initial;
      };
      .delete-image {
        display: flex;
        position: absolute;
        top:0;
        right:0;
        padding: 3px;
        .el-icon{
          font-size:20px;
        }
      }
    }
    li.imgplus{
      >div{text-align: center;}
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items: center;
      width: 160px;
      height: 160px;
      overflow: hidden;
      border: 1px dashed rgba(153,153,153,0.4);
      background: rgba(222,222,222,0.2); cursor: pointer;
      .el-icon{font-size: 50px;color:#999;}
    }
    li:nth-child(6n){margin-right:0;}
  }
</style>
